<template>
  <NuxtLayout>
    <!-- 首页 -->
    <div class="con-content-box">
      <!-- 首页菜单、banner -->
      <div class="index-banner">
        <!-- banner左侧菜单 -->
        <div class="banner-left">
          <dl v-for="(item, index) in menuConfig" :key="item.id" class="dl">
            <template v-if="index < 7">
              <dt class="dl-dt">
                <a class="dl-dt-link" :class="item.children ? 'right-icon' : ''" :href="`/curriculum/${item.id}`"
                  :title="item.name">{{ item.name }}</a>
              </dt>
              <dd class="dl-dd" v-if="item.children && item.children.length > 0">
                <dl v-for="ite in item.children" :key="ite.id" class="dl">
                  <dt class="dl-dt">
                    <a class="dl-dt-link" :class="ite.children ? 'right-icon' : ''"
                      :href="`/curriculum/${item.id}/${ite.id}`" :title="ite.name">{{ ite.name }}</a>
                  </dt>
                  <dd class="dl-dd" v-if="ite.children && ite.children.length > 0">
                    <dl v-for="val in ite.children" :key="val.id" class="dl">
                      <dt class="dl-dt">
                        <a class="dl-dt-link" :class="val.children ? 'right-icon' : ''"
                          :href="`/curriculum/${item.id}/${ite.id}/${val.id}`" :title="val.name">{{ val.name }}</a>
                      </dt>
                    </dl>
                  </dd>
                </dl>
              </dd>
            </template>
          </dl>
        </div>
        <div class="banner-right">
          <!-- banner轮播 -->
          <div class="banner-rightin">
            <div class="block text-center" m="t-4">
              <el-carousel trigger="click" height="330px">
                <el-carousel-item v-for="(item, index) in bannerInfo" :key="index">
                  <img :src="item.img" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </div>
      <!-- 首页学习流程 -->
      <div class="learn-box">
        <!-- 首页公用title -->
        <div class="title_box">
          <div class="left">学习流程</div>
        </div>
        <div class="process-box">
          <div class="process">
            <img src="https://static.dzyxzx.cn/jkbpc/l1.png" alt="" />
            登录
          </div>
          <img class="lef" src="https://static.dzyxzx.cn/jkbpc/b-r.png" alt="" />
          <div class="process">
            <img src="https://static.dzyxzx.cn/jkbpc/l2.png" alt="" />
            认证
          </div>
          <img class="lef" src="https://static.dzyxzx.cn/jkbpc/b-r.png" alt="" />
          <div class="process">
            <img src="https://static.dzyxzx.cn/jkbpc/l3.png" alt="" />
            选课
          </div>
          <img class="lef" src="https://static.dzyxzx.cn/jkbpc/b-r.png" alt="" />
          <div class="process">
            <img src="https://static.dzyxzx.cn/jkbpc/l4.png" alt="" />
            学习
          </div>
          <img class="lef" src="https://static.dzyxzx.cn/jkbpc/b-r.png" alt="" />
          <div class="process">
            <img src="https://static.dzyxzx.cn/jkbpc/l5.png" alt="" />
            考试
          </div>
          <img class="lef" src="https://static.dzyxzx.cn/jkbpc/b-r.png" alt="" />
          <div class="process">
            <img src="https://static.dzyxzx.cn/jkbpc/l6.png" alt="" />
            申请
          </div>
          <img class="lef" src="https://static.dzyxzx.cn/jkbpc/b-r.png" alt="" />
          <div class="process">
            <img src="https://static.dzyxzx.cn/jkbpc/l7.png" alt="" />
            完成
          </div>
        </div>
      </div>
      <!-- 题库 -->
      <QuestionBank :titleInfo="{ title: '驾考题库', path: jkMorePath, showMore: true }" :bankList="jkList" :href="true" />
      <div class="exa-box">
        <div class="exa-box-item">
          <div class="title_box" style="width: auto;">
            <div class="left">从业资格题库</div>
            <a class="more" :href="cyzgMorePath">
              更多
              <img src="https://static.dzyxzx.cn/jkbpc/more.png">
            </a>
          </div>
          <ul class="exa-box-item-ul">
            <li class="exa-box-item-ul-li" v-for="(item, index) in cyzgList" :key="index">
              <BankItem :itemInfo="item" :href="item.href" />
            </li>
          </ul>
        </div>
        <div class="exa-box-item">
          <div class="title_box" style="width: auto;">
            <div class="left">特种作业题库</div>
            <a class="more" :href="tzzyMorePath">
              更多
              <img src="https://static.dzyxzx.cn/jkbpc/more.png">
            </a>
          </div>
          <ul class="exa-box-item-ul">
            <li class="exa-box-item-ul-li" v-for="(item, index) in tzzyList" :key="index">
              <BankItem :itemInfo="item" :href="item.href" />
            </li>
          </ul>
        </div>
        <!-- <QuestionBank :titleInfo="{ title: '从业资格题库', path: '/exercises', showMore: true }" :bankList="cyzgList" /> -->
        <!-- <QuestionBank :titleInfo="{ title: '特种作业题库', path: '/exercises', showMore: true }" :bankList="tzzyList" /> -->
      </div>
      <!-- 课程 -->
      <LessonBank :lessonInfo="lessonInfo" />
    </div>
  </NuxtLayout>
</template>

<script setup>
import { useCountStore } from '~/store/counter'
import { getBannerApi, getLessonListApi, getQuestionListApi, getJkExerciseSubject, getZgzExerciseSubject, getTzzyExerciseSubject } from '~/server/api'
import { treeFn } from '~/utils/utils'
const menuConfig = ref([])
const bankList = ref([])
const jkList = ref([])
const cyzgList = ref([])
const tzzyList = ref([])
const jkMorePath = ref('')
const cyzgMorePath = ref('')
const tzzyMorePath = ref('')
const countStore = useCountStore()
const changeIndex = () => {
  countStore.$patch({
    indexActive: 1
  })
}
changeIndex()
// banner menu
async function getSubject() {
  let { data: subjectRes } = await useAsyncData('getQuestionListApi', () => useServerRequest(getQuestionListApi, {
    method: 'post',
    body: JSON.stringify({
      pageNum: 1,
      pageSize: 666,
      courseOpen: true,
      exerciseOpen: true
    })
  }))
  if (subjectRes.value && subjectRes.value.errno === 0 && subjectRes.value.result && subjectRes.value.result.list) {
    // 课程菜单 不显示一级菜单
    let treeArr = treeFn(subjectRes.value.result.list, 0, [])
    treeArr.filter(item => {
      if (item.level == 1 && item.children && item.children.length > 0) {
        menuConfig.value.push(...item.children)
      }
    })
    // 习题列表
    let _list = [];
    subjectRes.value.result.list.forEach(item => {
      if (item.level === 3 && _list.length < 8) {
        _list.push(item)
      }
    })
    bankList.value = _list;
    return false
  }
}
getSubject()
// 获取驾考题库
const getJkFn = async () => {
  let { data: listRes } = await useAsyncData('getJkExerciseSubject', () => useServerRequest(getJkExerciseSubject, {
    method: 'post'
  }))
  if (listRes.value && listRes.value.errno === 0 && listRes.value.result.length > 0) {
    listRes.value.result.forEach(item => {
      item.href = `/exercises/${item.parentIdChain.replace('0-', '').replaceAll('-', '/')}`
    })
    let rootId = /^\d+/.exec(listRes.value.result[0].parentIdChain.replace('0-', ''))
    jkMorePath.value = `/exercises/${rootId}`;
    jkList.value = listRes.value.result;
    return false
  }
}
getJkFn()
// 获取从业资格题库
const getCyzgFn = async () => {
  let { data: listRes } = await useAsyncData('getZgzExerciseSubject', () => useServerRequest(getZgzExerciseSubject, {
    method: 'post'
  }))
  if (listRes.value && listRes.value.errno === 0 && listRes.value.result.length > 0) {
    listRes.value.result.forEach(item => {
      item.href = `/exercises/${item.parentIdChain.replace('0-', '').replaceAll('-', '/')}`
    })
    let rootId = /^\d+/.exec(listRes.value.result[0].parentIdChain.replace('0-', ''))
    cyzgMorePath.value = `/exercises/${rootId}`;
    cyzgList.value = listRes.value.result;
    return false
  }
}
getCyzgFn()
// 获取特种作业题库
const getTzzyFn = async () => {
  let { data: listRes } = await useAsyncData('getTzzyExerciseSubject', () => useServerRequest(getTzzyExerciseSubject, {
    method: 'post'
  }))
  if (listRes.value && listRes.value.errno === 0 && listRes.value.result.length > 0) {
    listRes.value.result.forEach(item => {
      item.href = `/exercises/${item.parentIdChain.replace('0-', '').replaceAll('-', '/')}`
    })
    let rootId = /^\d+/.exec(listRes.value.result[0].parentIdChain.replace('0-', ''))
    tzzyMorePath.value = `/exercises/${rootId}`;
    tzzyList.value = listRes.value.result;
    return false
  }
}
getTzzyFn()
// banner
const bannerInfo = ref([])
const getBanner = async () => {
  let { data: bannerRes } = await useAsyncData('getBannerApi', () => useServerRequest(getBannerApi, {
    method: 'post',
    body: JSON.stringify({
      position: 'INDEX_MINI_PROG'
    })
  }))
  if (bannerRes.value && bannerRes.value.errno === 0) {
    bannerInfo.value = bannerRes.value.result.contents
    return false
  }
}
getBanner()
// 获取课程
const lessonInfo = ref([])
const getLesson = async () => {
  let { data: courseRes } = await useAsyncData('getLessonListApi', () => useServerRequest(getLessonListApi, {
    method: 'post',
    body: {
      pageNum: 1,
      pageSize: 6,
      courseOpen: true
    }
  }))
  if (courseRes.value && courseRes.value.errno === 0 && courseRes.value.result && courseRes.value.result.list) {
    lessonInfo.value = courseRes.value.result.list;
    return false
  }
}
getLesson()
// SEO优化-动态标题
useSeoMeta({
  title: '技考邦',
  description: '特种作业学习，课程题库',
  keywords: '技考邦，特种就业培训，企业负责人，题库，课程'
})
</script>

<style lang="less" scoped>
.exa-box {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  &-item {
    flex: calc(50% - 10px) 0;

    &-ul {
      margin-left: -20px;
      overflow: hidden;

      &-li {
        float: left;
        margin: 0 0 20px 20px;
      }
    }
  }
}

// 单行文本超出省略号
.overText(@max-width) {
  max-width: @max-width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本超出省略
.overTexts(@line-count, @width, @line-height, @font-size) {
  display: -webkit-box;
  -webkit-line-clamp: @line-count;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: @width;
  line-height: @line-height;
  font-size: @font-size;
}

.con-content-box {
  min-width: 1200px;
  margin: 0 auto;
  background: rgb(249, 249, 249);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.index-banner {
  width: 1200px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 34px;

  .banner-left {
    width: 270px;
    height: 330px;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
  }

  .banner-right {
    width: 910px;
    height: 330px;
    border-radius: 10px;
  }
}

.dl {
  position: relative;
  margin: 0;

  .dl-dt {
    cursor: pointer;

    .dl-dt-link {
      display: block;
      padding: 10px 20px 10px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
      font-size: 14px;

      &.right-icon::after {
        content: '';
        width: 5px;
        height: 9px;
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        background: url('https://static.dzyxzx.cn/jkbpc/s-r.png') center / 5px no-repeat;
      }
    }
  }

  .dl-dd {
    margin: 0;
    min-width: 150px;
    position: absolute;
    top: -20px;
    left: 100%;
    z-index: 99;
    font-size: 14px;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
    display: none;
  }

  &:hover>.dl-dd {
    display: block;
  }

  &:hover>.dl-dt>.dl-dt-link {
    color: #FF3F29;
  }
}

.banner-rightin {
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.03);
}

.el-carousel {
  border-radius: 10px;

  img {
    width: 910px;
    height: 330px;
  }
}

.learn-box {
  width: 1200px;
  margin-bottom: 34px;
}

.process-box {
  width: 1200px;
  height: 175px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.03);
}

.process {
  height: 130px;
  font-size: 16px;
  color: #666;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.lef {
  margin-bottom: 25px;
}

.title_box {
  width: 1200px;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    font-size: 24px;
    font-weight: bold;
  }

  .more {
    width: 51px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #666;
    cursor: pointer;

    &:hover {
      color: #FF3F29;
    }
  }
}
</style>